<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <ul>
      <li v-for="item in activity">
        <router-link tag="div" class="tab-item" :to="item.path">
          <span class="tab-link">{{item.name}}</span>
        </router-link>
      </li>
    </ul>
    <ul>
      <li v-for="item in recycle">
        <router-link tag="div" class="tab-item" :to="item.path">
          <span class="tab-link">{{item.name}}</span>
        </router-link>
      </li>
    </ul>
    <ul>
      <li v-for="item in app">
        <router-link tag="div" class="tab-item" :to="item.path">
          <span class="tab-link">{{item.name}}</span>
        </router-link>
      </li>
    </ul>
    <ul>
      <li v-for="item in levy">
        <router-link tag="div" class="tab-item" :to="item.path">
          <span class="tab-link">{{item.name}}</span>
        </router-link>
      </li>
    </ul>
    <div class="functionList" v-if="preINV">
      <h3>Native To Js Function List</h3>
      <p>1. native返回支付结果给js</p>
      <pre>
        window.payResult = (result,msg)=>{
          //result boolean (返回支付结果)
          //msg string (返回结果信息)
        }
      </pre>
      <h3>Js To Native Function List</h3>
      <p>1. 获取登录token</p>
      <pre>
        getToken()
      </pre>
      <p>2. 发起分享</p>
      <pre>
        getAdInfo(title,desc,url,sUrl){
          //title （分享标题）
          //desc （分享页描述）
          //url （分享缩略图）
          //sUrl （分享地址，可省略）
        }
      </pre>
      <p>3. 刷新钱包</p>
      <pre>
        refreshWallet()
      </pre>
      <p>4. 发起充值</p>
      <pre>
        recharge()
      </pre>
      <p>5. 分享好友</p>
      <pre>
        WXSceneSession (title,desc,url){
          //title （分享标题）
          //desc （分享页描述）
          //url （分享缩略图）
        }
      </pre>
      <p>6. 分享朋友圈</p>
      <pre>
        WXSceneTimeline (title,desc,url){
          //title （分享标题）
          //desc （分享页描述）
          //url （分享缩略图）
        }
      </pre>
      <p>7. 发起返现活动充值</p>
      <pre>
        payMsg(type,value,id){
          //type （充值类型：1、支付宝，2、微信）
          //value （充值金额）
          //id （活动ID）
        }
      </pre>
    </div>
  </div>
</template>

<script>
  import RouterActivity from '@/activities/router'
  import RouterRecycle from '@/recycle/router'
  import App from '@/App/router'
  import aLevy from '@/levy/router'

  export default {
    name: 'hello',
    data () {
      return {
        msg: '六个轮子h5主页面',
        activity: [],
        recycle: [],
        app: [],
        levy: [],
        preINV: false
      }
    },
    mounted() {
      this.ActivityList();
      this.RecycleList();
      this.App();
      this.levy[0] = aLevy;
      let apiRoot = process.env.API_ROOT;
      if(apiRoot.indexOf('d-api')>=0)
      {
        this.preINV = true;
      }
    },
    methods: {
      ActivityList() {
        for (let v in RouterActivity.children) {
          this.activity.push(RouterActivity.children[v])
        }
        return this.activity
      },
      RecycleList() {
        for (let v in RouterRecycle.children) {
          this.recycle.push(RouterRecycle.children[v])
        }
        return this.recycle
      },
      App() {
        for (let v in App.children) {
          this.app.push(App.children[v])
        }
        return this.app
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  body{ font-size: 14px;}
  a,div{ font-size: 14px;}
  pre{ font-size: 12px;}
  h1, h2 {
    font-size: 14px;
    text-align: center;
    padding: 0.5rem;
  }
  .functionList{ padding: 0.2rem; border-top: 5px solid #eee;}
  h3{
    font-size: 14px;
    background: #eee;
    height: 1rem;
    line-height: 1rem;
    padding: 0 0.2rem;
  }
  p{ padding: 0 0.2rem;}
  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    margin: 10px;
    font-size: 12px;
    text-align: center;
  }

  a {
    color: #3c3c3c;
  }
  .tab-item{ border: 1px solid #eee; padding: 5px 0;}
</style>
